<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档管理 - 电商美工作品平台</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        :root {
            --primary-color: #409EFF;
            --secondary-color: #67C23A;
            --warning-color: #E6A23C;
            --danger-color: #F56C6C;
            --info-color: #909399;
            --background-color: #f5f7fa;
            --sidebar-width: 220px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        }

        body {
            background-color: var(--background-color);
            color: #333;
        }

        .app-container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: var(--sidebar-width);
            background-color: #304156;
            color: #fff;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
        }

        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            padding: 20px;
        }

        .header {
            background-color: #fff;
            padding: 0 20px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: var(--primary-color);
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .content-area {
            margin-top: 20px;
        }

        .card {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .search-bar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .search-options {
            display: flex;
            gap: 10px;
        }

        .documents-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .document-card {
            border: 1px solid #ebeef5;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s;
            background: white;
            cursor: pointer;
        }

        .document-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-color: var(--primary-color);
        }

        .document-header {
            padding: 15px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .document-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 20px;
            color: white;
        }

        .pdf { background-color: #F56C6C; }
        .doc { background-color: #409EFF; }
        .xls { background-color: #67C23A; }
        .ppt { background-color: #E6A23C; }
        .txt { background-color: #909399; }
        .zip { background-color: #9C27B0; }

        .document-info {
            flex: 1;
        }

        .document-title {
            font-weight: bold;
            margin-bottom: 4px;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .document-meta {
            color: #909399;
            font-size: 12px;
        }

        .document-body {
            padding: 15px;
        }

        .document-desc {
            color: #606266;
            font-size: 14px;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .document-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 15px;
        }

        .tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            background-color: #ecf5ff;
            color: var(--primary-color);
        }

        .document-footer {
            padding: 12px 15px;
            border-top: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fafafa;
        }

        .document-actions {
            display: flex;
            gap: 10px;
        }

        .menu-item {
            padding: 15px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
        }

        .menu-item:hover {
            background-color: #263445;
        }

        .menu-item.active {
            background-color: var(--primary-color);
        }

        .menu-icon {
            margin-right: 10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }

        .stat-info {
            flex: 1;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #909399;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .sidebar {
                width: 64px;
            }

            .main-content {
                margin-left: 64px;
            }

            .menu-text {
                display: none;
            }

            .documents-container {
                grid-template-columns: 1fr;
            }
        }

        .file-type-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <!-- 侧边导航 -->
        <div class="sidebar">
            <div class="logo" style="padding: 20px;">
                <i class="menu-icon el-icon-s-platform"></i>
                <span class="menu-text">美工作品管理</span>
            </div>
            <div class="menu-item">
                <i class="menu-icon el-icon-picture"></i>
                <span class="menu-text">图片作品</span>
            </div>
            <div class="menu-item active">
                <i class="menu-icon el-icon-document"></i>
                <span class="menu-text">文档管理</span>
            </div>
            <div class="menu-item">
                <i class="menu-icon el-icon-folder"></i>
                <span class="menu-text">分类管理</span>
            </div>
            <div class="menu-item">
                <i class="menu-icon el-icon-user"></i>
                <span class="menu-text">团队管理</span>
            </div>
            <div class="menu-item">
                <i class="menu-icon el-icon-s-data"></i>
                <span class="menu-text">数据统计</span>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>文档管理</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="user-info">
                    <el-button type="primary" icon="el-icon-upload" @click="showUploadDialog">上传文档</el-button>
                    <el-dropdown>
                            <span class="el-dropdown-link">
                                <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                                <span style="margin-left: 8px;">管理员</span>
                            </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <div class="content-area">
                <!-- 数据统计 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon" style="background-color: var(--primary-color);">
                            <i class="el-icon-document"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">428</div>
                            <div class="stat-label">文档总数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background-color: var(--secondary-color);">
                            <i class="el-icon-folder"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">12</div>
                            <div class="stat-label">分类数量</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background-color: var(--warning-color);">
                            <i class="el-icon-user"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">8</div>
                            <div class="stat-label">团队成员</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background-color: var(--danger-color);">
                            <i class="el-icon-s-data"></i>
                        </div>
                        <div class="stat-info">
                            <div class="stat-value">3.2GB</div>
                            <div class="stat-label">文档存储</div>
                        </div>
                    </div>
                </div>

                <!-- 搜索和筛选区域 -->
                <div class="card">
                    <div class="search-bar">
                        <el-input placeholder="搜索文档名称、描述或内容" v-model="searchQuery" style="width: 300px">
                            <template #append>
                                <el-button icon="el-icon-search"></el-button>
                            </template>
                        </el-input>
                        <div class="search-options">
                            <el-select v-model="filterCategory" placeholder="分类筛选" clearable>
                                <el-option label="需求文档" value="requirement"></el-option>
                                <el-option label="设计规范" value="spec"></el-option>
                                <el-option label="项目计划" value="plan"></el-option>
                                <el-option label="会议记录" value="meeting"></el-option>
                                <el-option label="培训资料" value="training"></el-option>
                            </el-select>
                            <el-select v-model="filterType" placeholder="类型筛选" clearable>
                                <el-option label="PDF文档" value="pdf"></el-option>
                                <el-option labelWord文档" value="doc"></el-option>
                                <el-option label="Excel表格" value="xls"></el-option>
                                <el-option label="PPT演示" value="ppt"></el-option>
                                <el-option label="文本文件" value="txt"></el-option>
                            </el-select>
                            <el-button type="primary" icon="el-icon-refresh" @click="resetFilters">重置</el-button>
                        </div>
                    </div>
                </div>

                <!-- 文档列表 -->
                <div class="card">
                    <h3>最近文档</h3>
                    <div class="documents-container">
                        <div v-for="(doc, index) in documents" :key="index" class="document-card" @click="openDocument(doc)">
                            <div class="document-header">
                                <div :class="['document-icon', doc.type]">
                                    <i :class="getFileIcon(doc.type)"></i>
                                </div>
                                <div class="document-info">
                                    <div class="document-title">{{ doc.name }}</div>
                                    <div class="document-meta">
                                        由 {{ doc.author }} 上传于 {{ doc.date }}
                                    </div>
                                </div>
                            </div>
                            <div class="document-body">
                                <div class="document-desc">
                                    {{ doc.description || '暂无描述' }}
                                </div>
                                <div class="document-tags">
                                    <span class="tag" v-for="(tag, tagIndex) in doc.tags" :key="tagIndex">{{ tag }}</span>
                                </div>
                            </div>
                            <div class="document-footer">
                                <div class="document-meta">
                                    {{ doc.size }} · 版本 {{ doc.version }}
                                </div>
                                <div class="document-actions">
                                    <el-button size="mini" icon="el-icon-download" @click.stop="downloadDocument(doc)">下载</el-button>
                                    <el-button size="mini" icon="el-icon-view" @click.stop="previewDocument(doc)">预览</el-button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <el-pagination
                            style="margin-top: 20px; text-align: center;"
                            background
                            layout="prev, pager, next, total"
                            :total="documentTotal"
                            :page-size="pageSize"
                            :current-page="currentPage"
                            @current-change="handlePageChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传文档对话框 -->
    <el-dialog title="上传文档" v-model="uploadDialogVisible" width="600px">
        <el-form :model="uploadForm" label-width="80px" :rules="uploadRules" ref="uploadFormRef">
            <el-form-item label="文档名称" prop="name">
                <el-input v-model="uploadForm.name" placeholder="请输入文档名称"></el-input>
            </el-form-item>
            <el-form-item label="文档分类" prop="category">
                <el-select v-model="uploadForm.category" placeholder="请选择分类">
                    <el-option label="需求文档" value="requirement"></el-option>
                    <el-option label="设计规范" value="spec"></el-option>
                    <el-option label="项目计划" value="plan"></el-option>
                    <el-option label="会议记录" value="meeting"></el-option>
                    <el-option label="培训资料" value="training"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文档描述" prop="description">
                <el-input type="textarea" v-model="uploadForm.description"
                          placeholder="请输入文档描述" :rows="3"></el-input>
            </el-form-item>
            <el-form-item label="标签" prop="tags">
                <el-tag
                        v-for="tag in uploadForm.tags"
                        :key="tag"
                        closable
                        style="margin-right: 8px;"
                        @close="removeTag(tag)">
                    {{ tag }}
                </el-tag>
                <el-input
                        v-if="tagInputVisible"
                        ref="tagInputRef"
                        v-model="tagInputValue"
                        size="small"
                        style="width: 100px;"
                        @keyup.enter="addTag"
                        @blur="addTag">
                </el-input>
                <el-button v-else size="small" @click="showTagInput">+ 添加标签</el-button>
            </el-form-item>
            <el-form-item label="上传文件" prop="file">
                <el-upload
                        action="#"
                        :auto-upload="false"
                        :on-change="handleFileChange"
                        :file-list="fileList">
                    <el-button icon="el-icon-upload">选择文档</el-button>
                    <template #tip>
                        <div style="color: #909399; font-size: 12px; margin-top: 8px;">
                            支持 PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT 格式，大小不超过 50MB
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="uploadDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpload">确 定</el-button>
                </span>
        </template>
    </el-dialog>
</div>

<script>
    const { createApp, ref, nextTick } = Vue;

    createApp({
        setup() {
            const searchQuery = ref('');
            const filterCategory = ref('');
            const filterType = ref('');
            const uploadDialogVisible = ref(false);
            const tagInputVisible = ref(false);
            const tagInputValue = ref('');
            const currentPage = ref(1);
            const pageSize = ref(8);
            const documentTotal = ref(42);
            const uploadFormRef = ref(null);
            const fileList = ref([]);

            const uploadForm = ref({
                name: '',
                category: '',
                description: '',
                tags: [],
                file: null
            });

            const uploadRules = {
                name: [{ required: true, message: '请输入文档名称', trigger: 'blur' }],
                category: [{ required: true, message: '请选择文档分类', trigger: 'change' }],
                file: [{ required: true, message: '请选择要上传的文件', trigger: 'change' }]
            };

            const documents = ref([
                {
                    id: 1,
                    name: '电商平台UI设计规范.pdf',
                    type: 'pdf',
                    author: '设计师张三',
                    date: '2023-06-15',
                    description: '包含电商平台所有UI组件的设计规范和标准，适用于Web和移动端',
                    tags: ['设计规范', 'UI', '标准'],
                    size: '2.4MB',
                    version: '1.2',
                    downloadCount: 42
                },
                {
                    id: 2,
                    name: '618大促活动需求文档.docx',
                    type: 'doc',
                    author: '产品经理李四',
                    date: '2023-06-10',
                    description: '618大促活动的详细需求说明，包含活动规则、页面流程和功能需求',
                    tags: ['需求文档', '618', '活动'],
                    size: '1.8MB',
                    version: '2.0',
                    downloadCount: 28
                },
                {
                    id: 3,
                    name: '用户调研数据分析.xlsx',
                    type: 'xls',
                    author: '数据分析师王五',
                    date: '2023-06-08',
                    description: '2023年第一季度用户调研数据汇总与分析报告',
                    tags: ['数据分析', '用户调研', '报告'],
                    size: '3.5MB',
                    version: '1.0',
                    downloadCount: 35
                },
                {
                    id: 4,
                    name: '产品原型设计评审会记录.txt',
                    type: 'txt',
                    author: '项目经理赵六',
                    date: '2023-06-05',
                    description: '6月5日产品原型设计评审会议记录，包含讨论要点和决策结果',
                    tags: ['会议记录', '评审', '原型'],
                    size: '0.8MB',
                    version: '1.1',
                    downloadCount: 19
                },
                {
                    id: 5,
                    name: '前端开发培训材料.pptx',
                    type: 'ppt',
                    author: '技术总监钱七',
                    date: '2023-06-01',
                    description: 'Vue.js和React前端开发技术培训材料，包含基础知识和最佳实践',
                    tags: ['培训材料', '前端', '技术'],
                    size: '5.2MB',
                    version: '1.3',
                    downloadCount: 56
                },
                {
                    id: 6,
                    name: '项目进度计划表.xlsx',
                    type: 'xls',
                    author: '项目经理孙八',
                    date: '2023-05-28',
                    description: 'Q3季度项目进度计划表，包含各项目里程碑和时间节点',
                    tags: ['项目计划', '进度', '时间表'],
                    size: '1.2MB',
                    version: '1.5',
                    downloadCount: 31
                }
            ]);

            const getFileIcon = (type) => {
                const icons = {
                    'pdf': 'el-icon-document',
                    'doc': 'el-icon-document',
                    'xls': 'el-icon-document',
                    'ppt': 'el-icon-document',
                    'txt': 'el-icon-document',
                    'zip': 'el-icon-folder'
                };
                return icons[type] || 'el-icon-document';
            };

            const showUploadDialog = () => {
                uploadDialogVisible.value = true;
            };

            const removeTag = (tag) => {
                uploadForm.value.tags = uploadForm.value.tags.filter(t => t !== tag);
            };

            const showTagInput = () => {
                tagInputVisible.value = true;
                nextTick(() => {
                    document.getElementById('tagInputRef')?.focus();
                });
            };

            const addTag = () => {
                if (tagInputValue.value) {
                    uploadForm.value.tags.push(tagInputValue.value);
                    tagInputValue.value = '';
                }
                tagInputVisible.value = false;
            };

            const handleFileChange = (file, fileList) => {
                uploadForm.value.file = file.raw;
                fileList.value = fileList;
            };

            const submitUpload = () => {
                if (!uploadFormRef.value) return;

                uploadFormRef.value.validate((valid) => {
                    if (valid) {
                        // 这里处理上传逻辑
                        console.log('上传文档:', uploadForm.value);
                        ElMessage.success('文档上传成功');
                        uploadDialogVisible.value = false;
                        resetUploadForm();
                    } else {
                        ElMessage.error('请完善表单信息');
                        return false;
                    }
                });
            };

            const resetUploadForm = () => {
                uploadForm.value = {
                    name: '',
                    category: '',
                    description: '',
                    tags: [],
                    file: null
                };
                fileList.value = [];
            };

            const resetFilters = () => {
                searchQuery.value = '';
                filterCategory.value = '';
                filterType.value = '';
            };

            const openDocument = (doc) => {
                ElMessage.info(`打开文档: ${doc.name}`);
                // 实际应用中这里会调用文档预览API
            };

            const downloadDocument = (doc) => {
                ElMessage.success(`开始下载: ${doc.name}`);
                // 实际应用中这里会调用文档下载API
            };

            const previewDocument = (doc) => {
                ElMessage.info(`预览文档: ${doc.name}`);
                // 实际应用中这里会调用文档预览API
            };

            const handlePageChange = (page) => {
                currentPage.value = page;
                // 在实际应用中，这里会发起API请求获取对应页面的数据
                console.log('切换到页面:', page);
            };

            return {
                searchQuery,
                filterCategory,
                filterType,
                uploadDialogVisible,
                tagInputVisible,
                tagInputValue,
                currentPage,
                pageSize,
                documentTotal,
                uploadForm,
                uploadRules,
                uploadFormRef,
                fileList,
                documents,
                getFileIcon,
                showUploadDialog,
                removeTag,
                showTagInput,
                addTag,
                handleFileChange,
                submitUpload,
                resetFilters,
                openDocument,
                downloadDocument,
                previewDocument,
                handlePageChange
            };
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>
